<template>
  <SearchForm  @handleReset="resetForm()" @handleSearch="submitQueryForm(queryFormRef)">
    <el-form ref="queryFormRef" :inline="true" :model="formInline" class="demo-form-inline" >
      <!-- form表单的prop要卸载<el-form-item>标签中，对应里面<input>标签的model的值，这样才能使用reset重置和submit时的参数校验 -->
      <el-form-item>
        <el-input v-model="formInline.userName" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.ip" placeholder="请输入访问ip" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.url" placeholder="请输入请求地址" clearable />
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.result"
          clearable
          style="width: 200px;"
          placeholder="请选择结果"
        >   
          <el-option key="1" label="成功" value="1" />
          <el-option key="2" label="失败" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="formInline.operateTimeArray" type="datetimerange" start-placeholder="请输入操作起始时间" end-placeholder="请输入操作结束时间" format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
    </el-form>
  </SearchForm>
  <el-scrollbar>
    <div class="table">
      <el-table ref="tableRef" :data="tableData" border stripe >
        <!-- <el-table-column label="入参" prop="inputParam" align="center" min-width="5%"/> -->
        <!-- <el-table-column label="出参" prop="outputParam" align="center" min-width="10%"/> -->
        <el-table-column label="操作用户" prop="userName" align="center"  min-width="10%" />
        <el-table-column label="访问ip" prop="ip" align="center"  min-width="20%"/>
        <!-- <el-table-column label="请求地址" prop="url" align="center"  min-width="25%" /> -->
        <el-table-column label="操作功能" prop="functionDesc" align="center" min-width="25%" />
        <el-table-column label="结果" prop="result" align="center" min-width="5%">
            <template #default="scope">
                {{ scope.row.result == 1 ? '成功' : '失败'}}
            </template>
        </el-table-column>
        <el-table-column label="操作时间" prop="operateTime" align="center" min-width="15%">
            <template #default="scope">
            {{ formatDate(scope.row.operateTime) }}
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页，
      background是样式，就是分页有背景色，
      layout就是分页插件展示的内容，且按照配置的顺序，total-总条数，prev-前一页按钮，pager-页数按钮，next-后一页按钮，sizes-设置每页展示多少条的可选项，
      :total就是数据总条数，在查询表数据时返回的，并给total参数赋值了，
      current-page就是当前页，绑定formInline的page参数，查询的时候就可以直接拿到值传参了，
      page-size就是每页条数，绑定formInline的size参数，查询的时候就可以直接拿到值传参了，
      @size-change就是改变每页条数时触发的事件，
      @current-change就是改变页数时触发的事件
      -->
      <el-pagination 
      background 
      layout="total, prev, pager, next, sizes" 
      :total="total"
      v-model:current-page="formInline.page" 
      v-model:page-size="formInline.size"  
      :page-sizes="[10, 20, 50, 100]" 
      @size-change="submitQueryForm(queryFormRef)"
      @current-change="submitQueryForm(queryFormRef)"
      />
    </div>
  </el-scrollbar>
</template>
  
<script lang="ts" setup>
import { reactive,ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { postWithToken, formatDate } from '~/composables/utils';

const queryFormRef = ref<FormInstance>();
// 列表查询的form
const formInline = reactive({
  userName: '',
  result: '',
  operateTimeArray: [],
  operateTimeStart: '',
  operateTimeEnd: '',
  url: '',
  ip: '',
  page: 1,
  size: 10
});
const tableData = ref<any>(null);
const total = ref<number>(0);

const submitQueryForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    onSubmit();
    return
  }
  formEl.validate((valid) => {
    if (valid) {
      onSubmit();
    } else {
      console.log('error submit!')
    }
  })
}

// 分页查询
const onSubmit = async () => {
  try {
    if (formInline.operateTimeArray) {
        formInline.operateTimeStart = formInline.operateTimeArray[0];
        formInline.operateTimeEnd = formInline.operateTimeArray[1];
    }
    console.log(formInline);
    const response = await postWithToken('/operateLog/pageOperateLog', formInline);
    if (response.code != 200) {
        ElMessage.error(response.msg);
    } else {
      // 设置表数据
      tableData.value = response.data;
      // 设置分页参数的total
      total.value = response.total;
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
};
onSubmit();
const resetForm = () => {
  formInline.userName = '';
  formInline.result = '';
  formInline.operateTimeStart = '';
  formInline.operateTimeEnd = '';
  formInline.operateTimeArray = [];
  formInline.url = '';
  formInline.ip = '';
}

</script>
  
  <style lang="scss">
  /* 为了页面刷新不出现滚动条 */
  .ep-scrollbar {
    height: auto;
  }
//   .tableButton {
//   padding-left: 20px;
//   // padding-bottom: 10px;
//   text-align: justify;
// }
// .table {
//   padding-left: 20px;
//   padding-right: 20px;
//   width: 95%;
// }
  </style>